<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="../dist//vue.js"></script>
    <div id="app">
        {{firstname}}
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                firstname:'朱古力'
            },
            //直接写成一个函数
            watch:{
                firstname(newValue,oldValue){
                    console.log(newValue,oldValue);
                }
            },
            //数组写法
            // methods: {
            //     fn(newValue,oldValue){
            //         console.log(newValue,oldValue);
            //     }
            // },
            // watch:{
            //     firstname:'fn',
            //     firstname:[
            //     'fn',
            //     (newValue,oldValue)=>{
            //         console.log(newValue,oldValue);
            //     }
            //     ]
            // }
            // 对象写法
            // watch:{
            //     firstname:{
            //         handler:function(){

            //         }
            //     }
            // }
        })
        //底层就算你写的是上面的方式 也是被转换成$watch的写法 
        vm.$watch(()=>vm.firstname,(newValue,oldValue)=>{
            console.log(newValue,oldValue,'11');
        })
        vm.$watch("firstname",(newValue,oldValue)=>{
            console.log(newValue,oldValue,'$');
        })
        //cb ->(newValue,oldValue)=>{
        //     console.log(newValue,oldValue,'$');
        // }
        setTimeout(()=>{
            vm.firstname = '傻琴'
        },1000)

        //逻辑：监控某个值变了 监控的这个值会收集这个watcher 如果变了就会执行watcher的回调 cb
    </script>

</body>
</html>